<script setup>
import { ref } from "@vue/reactivity";
import { fetchFile } from "../Api";
import { useRoute } from 'vue-router';
import MarkdownIt from "markdown-it"
import 'highlight.js/styles/atom-one-dark.css'
import hljs from "highlight.js"
import {fileUrl, newChangeImgSrc} from "../utils"

    const content = ref("# 正在加载文章....")
    const route = useRoute();
    // 理解了生命周期 这个的原理也很好理解了！
    const props = defineProps({
        type: String,
    });
    fetchFile(fileUrl(props.type,route.params.dir,route.params.file+".md")).then(res => {
        var md = MarkdownIt({
            breaks:        true,
            highlight: function (str, lang) {
                    if (lang && hljs.getLanguage(lang)) {
                    try {
                            return '<pre class="hljs" id="mycode"><code>' +
                                        hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
                                    '</code></pre>';
                    } catch (__) {}
                }
            },
            breaks: false,
            linkify: true,
        });
        let tmp = md.render(res.data)
        // 对图片url进行处理
        // 注意还得进行Base64解码
        let pre = 0
        let ans = ""
        while (pre<tmp.length) {
            let p = tmp.indexOf('<img src="',pre)
            if(p==-1)
            {
                ans += tmp.slice(pre,-1)
                break
            }
            p += 10
            let f = tmp.indexOf('"',p)
            let tems = decodeURI(tmp.slice(p,f))
            ans += tmp.slice(pre,p-1);
            ans += newChangeImgSrc(props.type,route.params.dir,route.params.file,tems);
            pre = f + 1
        }
        content.value = ans;
    })

</script>
 
<template>
    <div class="ShowMarkDownNote-container">
        <div class="article">
            <span v-html="content"></span>
        </div>
    </div>
</template>

<style lang='less' scoped>
    .ShowMarkDownNote-container {
        /deep/.article {
            * {
                margin-top: 4px;
            }
            margin: 0 auto;
            width: 70%;
            p {
                color: @dark_note_normal_font;
                margin-bottom: 18px;
                font-size: 18px;
            }
            ul,ol {
                padding: 10px 0;
                padding-left: 30px;
                margin-top: 15px;
                border: 2px dotted rgba(0, 0, 0, 0.2);
                border-radius: 5px;
                color: @dark_note_normal_font;
            }
            #mycode  {
                margin: 10px;
                border-radius: 20px;
                padding: 25px;
                font-size: 15px;
                margin-bottom: 20px;
            }
            h1 {
                margin: 20px 0;
                padding-bottom: 15px;
                border-bottom: 2px solid @dark_note_h123;
                font-size: 1.5em;
            }
            h2 {
                margin-top: 25px;
                font-size: 1.5em;
                padding-bottom: 10px;
                border-bottom: 0.8px solid @dark_note_h123;
            }
            h3 {
                // margin: 8px 0;
                margin-top: 20px;
                color: @dark_note_h123;
            }
            h4 {
                margin-top: 20px;
                color: @dark_note_h4;
            }
            p {
                margin-top: 5px;
                font-size: 14px;
            }
            blockquote {
                border-left: 5px solid ;
                padding: 10px;
                padding-left: 25px;
                margin-top: 15px;
                background: @dark_note_quote;
            }
            a {
                color: @dark_note_a;
                text-decoration: underline;
            }
            img {
                max-width: 900px;
            }
        }
    }
</style>